<template>
	<u-popup v-model="show" border-radius='14' :closeable='false' mode="center" :mask-close-able="false">
		<view class="seat-show-popup">
			<view class="info">
				<view class="title">
					高峰时段购票提示
				</view>
				<view class="content">
					为了提高您的订单出票率，建议您选择同意调座哦~<text style="color: #FF4345;">若您选择的座位被占</text>系统会就近<text style="color: #FF4345;">优选最佳观影位置~</text>
				</view>
			</view>
			
			<view class="bottom">
				<view class="cancel" @click="cancel">
					不同意<text>(无座自动退款)</text>
				</view>
				<view class="confirm" @click="confirm">
					同意<text>(最佳观影位置)</text>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
			}
		},
		model: {
			prop: 'value',
			event: 'input'
		},
		props: {
			value: {
				type: Boolean,
				default: false
			}
		},
		watch: {
			value: {
				handler(val) {
					this.show = val
				},
				immediate: true
			}
		},
		methods: {
			cancel(){
				this.$emit('input',false)
				this.$emit('seat-cancel')
			},
			confirm(){
				this.$emit('input',false)
				this.$emit('seat-confirm')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.seat-show-popup{
		width: 608rpx;
		padding: 40rpx 32rpx;
		background: border-box #FFFFFF linear-gradient(180deg, rgba(255,85,136,.2) 0%, rgba(255,85,136,0) 30%);
		.info{
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			>.title {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 32rpx;
				
				font-size: 34rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #1D2129;
				line-height: 48rpx;
			}
			>.content {
				padding: 24rpx 20rpx;
				background: rgba(255,67,69,0.06);
				border-radius: 8rpx;
				
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #1D2129;
				line-height: 44rrpx;
			}
			
		}
		
		.bottom{
			margin-top: 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			>.cancel,>.confirm {
				width: 256rpx;
				height: 72rpx;
				border-radius: 8rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				
				font-size: 26rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				line-height: 26rpx;
				>text {
					font-size: 20rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					line-height: 20rpx;
				}
			}
			>.cancel {
				background: rgba(201,205,212,0.14);
				color: #86909C;
			}
			>.confirm {
				background: linear-gradient(90deg, #F87474 0%, #FF4345 100%);
				color: #FFFFFF;
			}
		}
	}
	
</style>
